<template>
  <div class="gateway-analysis-wrapper">
    <div class="data-wrapper">
      <a-row :gutter="14">
        <a-col class="gutter-row" :span="17">
          <dataSummary />
          <GatewayConfig />
        </a-col>
        <a-col class="gutter-row" :span="7">
          <systemstate />
        </a-col>
      </a-row>
    </div>
    <div class="charts-wrapper">
      <SiteAnalysis :loading="loading" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import dataSummary from './components/dataSummary.vue';
  import GatewayConfig from '../config/index.vue';
  import systemstate from './components/systemstate.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  const loading = ref(true);
  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>

<style lang="less" scoped>
  .gateway-analysis-wrapper {
    padding: 16px;
    box-sizing: border-box;
    .data-wrapper {
      margin-bottom: 16px;
    }
  }
  .common-card {
    padding: 24px 24px 16px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 0px 23px 0px rgba(0, 0, 0, 0.04);
  }
  .title {
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
    position: relative;
    padding-left: 12px;
    box-sizing: border-box;
    margin-bottom: 9px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #2367fa;
      border-radius: 2px;
      position: absolute;
      top: 0px;
      bottom: 0px;
      margin: auto;
      left: 0px;
    }
  }
</style>
